<template>
	<view class="form ">
		
		<uni-forms ref="valiFormData" :model="formdata" :rules="rules" label-align="center"
			label-width="50rpx">
			<uni-row>
				<uni-col :xs="{span: 16, offset: 4}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}">
					<uni-forms-item label="账号" name="user" label-width="50px" required>
						<uni-easyinput v-model="formdata.user" required placeholder="请输入账号" />
					</uni-forms-item>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :xs="{span: 16, offset: 4}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}">
					<uni-forms-item label="密码" name="pwd" label-width="50px" required>
						<uni-easyinput type="password" v-model="formdata.pwd" placeholder="请输入密码" />

					</uni-forms-item>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :xs="{span: 16, offset: 4}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}">
					<uni-forms-item label="验证码" name="vailcode" label-width="50px" required>
						<view style="display: flex;">
							<uni-easyinput v-model="formdata.vailcode" placeholder="请输入验证码" />
							<image @click="refreshCaptchaImage" :src="imgCaptchaurl"
								style="width: 80px;height: 35px;"></image>
						</view>
					</uni-forms-item>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :xs="{span: 16, offset: 4}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}">
					<switch @change="switchChange"  style="transform:scale(0.7)"/><text style="font-size: 16px;">记住密码</text>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :xs="{span: 16, offset: 4}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}">
					<button type="primary" @click="loginBtnClick('valiFormData')">登录</button>
				</uni-col>
			</uni-row>
			
			
		</uni-forms>

	</view>
</template>

<script setup>
	import { computed,ref } from "vue";
	import  store  from "@/store/index.js"
	import { onUnload } from '@dcloudio/uni-app'
	let timerID = 0;
	const imgCaptchaurl=ref('/system/passport/getCaptcha')
	const valiFormData=ref(null)
	const formdata=ref({
		user:'',
		pwd:'',
		vailcode:''
	})
	const rules=ref({
				// 对name字段进行必填验证
				user: {
					rules: [{
						required: true,
						errorMessage: '请输入账号',
					}]
				},
				// 对email字段进行必填验证
				pwd: {
					rules: [{
						required: true,
						errorMessage: '请输入密码',
					}]
				},
			});
	
	const baseUrl = computed(() => store.state.baseUrl);
	
	
	const loginBtnClick=function(ref) {
				//进行校验数据this.$refs[ref] 标识找到表单元素
				valiFormData.value.validate().then(res => {
					//res 返回的是表单元素的值，不包括列表等
					
					
					
					uni.request({
						url: baseUrl.value + "/system/passport/login",
						method: 'POST',
						data: {
							username: res.user,
							password: res.pwd,
							captcha: res.vailcode
						},
						withCredentials: true,
						}).then(res=>{
							
							if(res.data && typeof res.data==="object"  ){							
								
								//返回的数据是成功还是失败
								if (res.data.success) {
									//写入缓存中	
									uni.setStorage({
										key:'rember',
										data:valiFormData.value.rember
									})								
									uni.setStorage({
										key: 'userinfo',
										data: JSON.stringify(res.data.userinfo),
										success: function() {
											
											store.commit('setUserinfo', res.data.userinfo)
											store.commit('setUserPower', res.data.user_power)
											
											// uni.switchTab({
											// 	url: '/pages/tabBar/quality/quality'
											// });
											uni.reLaunch({
												url: '/pages/tabBar/quality/quality'
											});
										},
						
									});
															
								}
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}else{
								uni.showToast({
									title: JSON.stringify(res),
									icon: 'none',
									duration:5000
								})
							}
								
						}).catch(res=>{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration:5000
							})
						}).finally((res)=>{
							console.log('finally', res);
							uni.hideLoading();
							
						})
				});
	}
					
			
	/**
	 * 刷新验证码函数
	 */
	const refreshCaptchaImage = function() {
		
		imgCaptchaurl.value = '/system/passport/getCaptcha' + "?" + Math.random()
		
	};
	/**
	 * 刷新验证码函数30s
	 */
	const timerSetInterval=function(){		
		
		// 启动 setInterval 并更新 timerID
		timerID = setInterval(() => {
		  // 周期执行 (1000毫秒)		  
		 refreshCaptchaImage()		 
		}, 30000)
	}
	timerSetInterval()
	onUnload(() => {
	      
		  // 取消
		  clearInterval(timerID)
	    })
	//检查checkbox
	const switchChange = function (e) {
		valiFormData.value.rember=e.detail.value
		
	}

		


	
</script>

<style lang="scss">
	.form {

		padding: 50rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.form-text {
			margin-top: 30rpx;
			padding: 50rpx;
			text-align: center;
			font-size: 50rpx;

		}
	}
</style>